<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>

	<ui:composition template="/page/layout/layout.xhtml">
		<ui:define name="title">Operacion</ui:define>
		<ui:define name="content">

		<a4j:commandLink styleClass="no-decor" render="table"
			execute="@this" oncomplete="#{rich:component('selectPane')}.show()">
				<h:graphicImage library="img/icons" name="zoom.png" alt="buscar" />
				<h:outputText value="Seleccionar Operacion" />
		</a4j:commandLink>

		<h:form id="form">

			<rich:collapsiblePanel expanded="true" header="Datos de la operacion" headerClass="headerCol">
			<h:panelGrid columns="2" width="100%" >
				<h:panelGrid columns="2" id="operInfoPanel1" width="50%">
					<h:outputText styleClass="letraCel" value="Id Operacion: " />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionId}" />
					<h:outputText styleClass="letraCel" value="Tipo de Operacion: " />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionTipo}" />
					<h:outputText styleClass="letraCel" value="Import/Export: " />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionExportacionImportacion}" />
					<h:outputText styleClass="letraCel" value="Tiempo de estadia: " />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionTiempoEstadia}" />
					<h:outputText styleClass="letraCel" value="Fecha de operacion: " />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionFecha}" />
				</h:panelGrid>
				<h:panelGrid columns="2" id="operInfoPanel2" width="50%">
					<h:outputText styleClass="letraCel" value="Carga/Descarga:" />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionCargaDescarga}" />
					<h:outputText styleClass="letraCel" value="Origen operacion:" />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionOrigen}" />
					<h:outputText styleClass="letraCel" value="Destino operacion:" />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionDestino}" />
					<h:outputText styleClass="letraCel" value="Costo actual operacion:" />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionCostoTotal}" />
				</h:panelGrid>
			</h:panelGrid>
			<h:panelGrid columns="2" id="operacionObservacion" width="100%">
					<h:outputText styleClass="letraCel" value="Observaciones:" />
					<h:outputText styleClass="letraCel" value="#{applicationBean.operacionActual.operacionObservaciones}" />
				</h:panelGrid>
			<a4j:commandLink value="Finalizar operacion" styleClass="no-decor" style="float: right;"  execute="@this"
				render="@none"
				oncomplete="#{rich:component('confirmFinalizaPane')}.show()">
			</a4j:commandLink>
			<br/>
			</rich:collapsiblePanel>

		</h:form>

		<rich:popupPanel header="Seleccionar operacion" id="selectPane"
				domElementAttachment="parent" autosized="true">
			<rich:dataTable value="#{listOperacionView.all}" var="operacion"
				iterationStatusVar="it" id="table" rows="15">
				<rich:column>
					<f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>
				<rich:column>
					<f:facet name="header">Id Operacion</f:facet>
					<h:outputText value="#{operacion.operacionId}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Buque</f:facet>
					<h:outputText value="#{operacion.buque.buqueNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Cliente</f:facet>
					<h:outputText value="#{operacion.cliente.clienteNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Agencia Nacional</f:facet>
					<h:outputText
						value="#{operacion.agenciaNacional.agenciaNacionalNombre}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Tipo Operacion</f:facet>
					<h:outputText value="#{operacion.operacionTipo}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Import/Export</f:facet>
					<h:outputText value="#{operacion.operacionExportacionImportacion}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Estadia</f:facet>
					<h:outputText value="#{operacion.operacionTiempoEstadia}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Fecha</f:facet>
					<h:outputText value="#{operacion.operacionFecha}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Costo actual</f:facet>
					<h:outputText value="#{operacion.operacionCostoTotal}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Observaciones</f:facet>
					<h:outputText value="#{operacion.operacionObservaciones}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Carga/Descarga</f:facet>
					<h:outputText value="#{operacion.operacionCargaDescarga}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Origen</f:facet>
					<h:outputText value="#{operacion.operacionOrigen}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Destino</f:facet>
					<h:outputText value="#{operacion.operacionDestino}" />
				</rich:column>

					<rich:column>
						<f:facet name="header">Seleccionar</f:facet>
						<a4j:commandLink styleClass="no-decor" execute="@this"
							render="@none"
							oncomplete="#{rich:component('confirmSelectPane')}.show()">
							<h:graphicImage library="img/icons" name="zoom.png" alt="select" />
							<f:setPropertyActionListener target="#{applicationBean.operacionActual}"
								value="#{operacion}" />
							<f:setPropertyActionListener target="#{listOperacionView.edited}"
								value="#{operacion}" />
						</a4j:commandLink>
					</rich:column>
					<f:facet name="footer">
					<rich:dataScroller page="#{listOperacionView.page}" />
				</f:facet>
			</rich:dataTable>

			<a4j:commandLink styleClass="no-decor" execute="@this"
					render="form"
					oncomplete="#{rich:component('selectPane')}.hide()">
				<h:outputText value="Salir" />
			</a4j:commandLink>
		</rich:popupPanel>

		<a4j:jsFunction name="ocultar" render="table" execute="@this"
				oncomplete="#{rich:component('confirmSelectPane')}.hide();" />
				
		<a4j:jsFunction name="ocultarFinaliza" render="table" execute="@this"
				oncomplete="#{rich:component('confirmFinalizaPane')}.hide();" />

		<rich:popupPanel id="confirmFinalizaPane" autosized="true">
				¿Esta seguro que desea finalizar la operacion?
			<a4j:commandButton value="Si" action="#{listOperacionView.store}" execute="@this"
								oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('confirmFinalizaPane')}.hide();}">
				<f:setPropertyActionListener target="#{applicationBean.operacionActual.operacionEstado}"
								value="1" />
			</a4j:commandButton>
			<a4j:commandButton value="No" onclick="ocultarFinaliza(); return true;" />
		</rich:popupPanel>

		<rich:popupPanel id="confirmSelectPane" autosized="true">
			<h:form>
				Ha seleccionado esta operacion para trabajar.
				<h:commandButton value="Ok" action="/page/main" onclick="ocultar(); return true;"  reRender="mainnav"/>
			</h:form>
		</rich:popupPanel>

		</ui:define>
	</ui:composition>

</h:body>
</html>